<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="css/cupertino/jquery-ui-1.7.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

    <script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script src="js/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>    
</head>

<body>
    <script type="text/javascript">
        google.load("visualization", "1");
        google.setOnLoadCallback(drawChart);
        var chart;
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Label');
            data.addColumn('number', 'Value');
            data.addRows(2);
            data.setCell(0, 0, 'Matt');
            data.setCell(1, 0, 'Jessica');
            data.setCell(0, 1, 10, '$10');
            data.setCell(1, 1, 30, '$30');
            var chartDiv = document.getElementById('chartdiv');
            chart = new PilesOfMoney(chartDiv);
            chart.draw(data);
            // Adjust height of gadget.
            if (typeof gadgets != "undefined") {
                gadgets.window.adjustHeight();
            }
        }

        // Wave logic

        function stateUpdated() {
        }

        function renderInfo() {
            
            if (!wave.getState()) {
                return;
            }

            var highestBid = 0;
            var highestBidderId = null;
            var state = wave.getState();
            var keys = state.getKeys();
            for (var i = 0; i < keys.length; ++i) {
                var bidder = keys[i];
                var bid = parseInt(state.get(bidder));
                if (bid > highestBid) {
                    highestBid = bid;
                    highestBidderId = bidder;
                }
            }
            var bidderName = 'Nobody';
            var thumbNail = 'http://gadget-doc-examples.googlecode.com/svn/trunk/images/unknown.gif';
            if (highestBidderId) {
                bidderName = highestBidderId;
                var participants = wave.getParticipants();
                var numPeople = participants.length;
                if (participants) {
                    for (var i = 0; i < participants.length; ++i) {
                        if (participants[i].getId() == highestBidderId) {
                            var highestBidder = participants[i];
                            bidderName = highestBidder.getDisplayName();
                            if (!bidderName) {
                                bidderName = highestBidder.getId();
                            }
                            thumbNail = highestBidder.getThumbnailUrl();
                        }
                    }
                }
            }
            document.getElementById('bidderThumbnail').src = thumbNail;
            document.getElementById('bidderName').firstChild.nodeValue = bidderName;
            document.getElementById('highestBid').firstChild.nodeValue = highestBid;
            document.getElementById('yourBid').value = highestBid;
            document.getElementById('participants').firstChild.nodeValue = numPeople;
        }

        
        
        function init() {
            if (wave && wave.isInWaveContainer()) {
                wave.setStateCallback(stateUpdated);
                wave.setParticipantCallback(renderInfo);

            }
        }
        gadgets.util.registerOnLoadHandler(init);

    </script>

   <h2>Open Wagers</h2>

   <h2>Add Wager</h2>

    <img id="bidderThumbnail" src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/unknown.gif" width="50" height="50"/><br/>
    <span id="bidderName">Nobody</span><br/>
    Highest bid: <span id="highestBid">0</span><br/>
    Your bid: <input id="yourBid" size="5" value="0"><button id="butCount" onclick="buttonClicked()">Bid</button><br/>
    Number of wave participants: <span id="participants">1</span></br>
    

   <h2>History</h2>

    
    
   <h2>Lifetime Achievement</h2>

    <div id="chartdiv"></div>

    powered by blah blah blah

</body>
</html>